<template>
    <div>
    <van-goods-action>
        <van-goods-action-icon to="/home" icon="wap-home-o" text="首页" />
        <van-goods-action-icon to="/phone" icon="phone-o" text="电话" />
        <van-goods-action-icon to="cart" icon="cart-o" text="购物车" />
        <van-goods-action-button type="warning" @click="showPopup=!showPopup" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" @click="buy()" />
    </van-goods-action>
    <!-- 弹出层 -->
    <van-popup v-model="showPopup" closeable round position="bottom" :style="{ height: '35%' }">
      <van-card
          :num="basic.number"
          :price="basic.minPrice"
          :title="basic.name"
          :thumb="basic.pic"
        />
            <van-stepper v-model="basic.number"/>
            <van-button @click="addnum()" size="large" round style="margin-top:5px" color="#ff734c">确定</van-button>
    </van-popup>
    </div>
</template>

<script>
export default {
  props: {
    basic: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      showPopup: false
    }
  },
  methods: {
    addnum () {
      this.showPopup = !this.showPopup
      this.$emit('addnum')
    },
    buy () {
      this.$emit('buy')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
